<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" class="autoinsert" src="../js/jquery-2.2.0.min.js"></script>
		<!-- bootstrap规定使用前置设置 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="../bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="../css/admin_fog.css" />
		<script type="text/javascript" class="autoinsert" src="../js/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/layer.css" />
		<title>城市列表</title>
		<link rel="stylesheet" type="text/css" href="../css/admin_top.css" />
		<script type="text/javascript" src="../js/admin_top.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/admin_left.css" />
		<script type="text/javascript" src="../js/admin_left.js"></script>
		<link rel="shortcut icon" href="../img/icon.jpg">
	</head>
	<body>

		<div id="left"></div>
		<div id="top"></div>

		<div class="main">
			<div class="goodsindex" id="app">
				<!-- 搜索条件 -->
				<el-row :gutter="20" class="goodsindex-queryInfo">
					<!-- 商品名称搜索 -->
					<el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
						<el-input class="goodsindex-queryInfo-li" v-model="queryInfo.city" clearable size="small"
							placeholder="请输入城市名称"></el-input>
					</el-col>
					<!-- 商品分类搜索 -->
					<el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
						<el-input class="goodsindex-queryInfo-li" v-model="queryInfo.province" clearable size="small"
								  placeholder="请输入省份"></el-input>
					</el-col>
					<el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
						<el-button type="primary" class="goodsindex-queryInfo-li" size="small" @click="searchCity">
							搜索</el-button>
					</el-col>
					<el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
						<el-button type="success" class="goodsindex-queryInfo-li" size="small" @click="addCity">添加
						</el-button>
					</el-col>
				</el-row>
				<!-- 检索结果 -->
				<el-row :gutter="20" class="goodsindex-list">
					<el-col :span="24">
						<el-table :data="tableData" border size='small' style="width: 100%">
							<el-table-column type="index" label="序号" width="100"></el-table-column>
							<el-table-column prop="id" label="ID" width="100"></el-table-column>
							<el-table-column prop="city" label="城市名称" width="150"></el-table-column>
							<el-table-column prop="province" label="所在省份" width="150"></el-table-column>
							<el-table-column prop="longitude" label="经度" width="200"></el-table-column>
							<el-table-column prop="latitude" label="纬度" width="200"></el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button type="primary" class="one_buttom" size="small"
										@click="updateCity(scope.row.id)">编辑</el-button>
									<el-button type="danger" class="one_buttom" size="small"
										@click="deleteCity(scope.row.id)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<!-- 分页 -->
				<el-row :gutter="20" class="goodsindex-list">
					<el-col :span="24" class="goodsindex-page-box">
						<el-pagination :hide-on-single-page="false" @size-change="handleSizeChange"
							@current-change="handleCurrentChange" :current-page="queryInfo.page"
							:page-sizes="[10, 20, 50, 100]" :page-size="queryInfo.pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.totalNum">
						</el-pagination>
					</el-col>
				</el-row>
			</div>
		</div>

	</body>

	<script type="text/javascript">
		$("#top").load("top.html");
		$("#left").load("left.html");
	</script>

	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vue-resource.min.js"></script>

	<!-- 引入ElementUI -->
	<script type="text/javascript" src="../ElementUI/index.js"></script>
	<link rel="stylesheet" type="text/css" href="../ElementUI/index.css" />

	<script type="text/javascript" src="../js/admin_city.js"></script>

</html>
